/**
 * 根据传入的类型名称,创建不同的控件
 */
<template>
  <component class="d-context" :is="componentType" v-model="attrData" size="small" active-text="是" inactive-text="否"
    :min="type == 'slider' ? 0.0 : undefined" :max="type == 'slider' ? 1.0 : undefined"
    :step="type == 'slider' ? 0.01 : undefined" controls-position="right">
    <template v-if="options != undefined">
      <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value" />
    </template>
  </component>
</template>

<script>
import { Input, Select, InputNumber, ColorPicker, Slider, Switch } from 'element-ui';

export default ({
  props: ['type', 'modelValue', 'options', 'name'],
  computed: {
    componentType() {
      switch (this.type) {
        case "label":
        case 'text':
        case 'textarea':
          return Input;
        case 'number':
          return InputNumber;
        case 'combobox':
          return Select;
        case 'radio':
          return Switch;
        case 'color':
          return ColorPicker;
        case 'slider':
          return Slider;
        default:
          return Input;
      }
    },
  },
  data() {
    return {
      attrData: this.modelValue
    }
  },
  watch: {
    attrData: {
      handler(newValue) {
        this.bus.$emit('updateAttr', { "name": this.name, "value": newValue })
      }
    },
    deep: true
  }
})
</script>